<!DOCTYPE html>
<html lang="en">

<head>
    <!--余枭春-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看试卷分类</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>
</head>

<body>
    <div id="app" class="container" style="padding: 80px 100px 10px;">
        <div>
            <button class="btn btn-outline-primary btn-block" data-toggle="modal" data-target="#addModal">新建分类</button>
        </div>
        <div style="padding-top: 20px;">
            <table class="table table-bordered" style="text-align: center;">
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>名称</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(classification,index) in paperClassifications" style="text-align: center;">
                        <td>{{index}}</td>
                        <td>{{classification.name}}</td>
                        <td>
                            <div class="input-group" style="text-align: center;margin: 0px auto;">
                                <div style="width: 50%;float: right;text-align: right;">
                                    <button class="btn btn-warning" data-toggle="modal" data-target="#updaterModal" @click="updatec(classification)">修改</button>
                                </div>
                                <div style="width: 50%;float: left;text-align: left;">
                                    <button class="btn btn-danger" @click="deletec(classification.id)">删除</button>
                                </div>


                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 模态框 -->
            <div class="modal fade" id="updaterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            修改试卷分类
                        </div>
                        <div class="modal-body">
                            <input v-model="name" class="form-control">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="updateb()">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框 -->
            <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            新增试卷分类
                        </div>
                        <div class="modal-body">
                            <input v-model="name" class="form-control">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" @click='newc()'>确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                token: "",
                refreshToken: "",
                paperClassifications: [],
                name: "",
                classification: null,
                storage: undefined
            },
            mounted() {
                this.storage = window.localStorage;
                this.getData();
            },
            methods: {
                getData: function() {
                    this.token = this.storage.getItem("token");
                    this.refreshToken = this.storage.getItem("refreshToken");
                    axios.get("/exam/paperClassification/all", {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        this.paperClassifications = res.data.data;
                    });
                },
                newc: function() {
                    this.token = this.storage.getItem("token");
                    this.refreshToken = this.storage.getItem("refreshToken");
                    axios.post("/exam/paperClassification/insert", {
                        "name": this.name
                    }, {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.getData();
                            console.info("ok");
                        }
                    })
                },
                updatec: function(classification) {
                    this.classification = classification;
                    this.name = classification.name;


                },
                updateb: function() {
                    this.token = this.storage.getItem("token");
                    this.refreshToken = this.storage.getItem("refreshToken");
                    axios.post("/exam/paperClassification/updateName", {
                        "id": this.classification.id,
                        "name": this.name
                    }, {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            console.info("ok")
                            this.getData();
                        }
                    })
                },
                deletec: function(id) {
                    this.token = this.storage.getItem("token");
                    this.refreshToken = this.storage.getItem("refreshToken");
                    axios.get("/exam/paperClassification/delete/" + id, {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            console.info("ok1")
                            this.getData();
                        }
                    });
                }
            }
        })
    </script>
</body>


</html>